<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>单表增删改查demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
    <link rel="stylesheet" href="../resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../resources/css/bootstrap-vue.min.css"/>
<style type="text/css">
table, table thead th, table tr td {
	border: 1px solid #0094ff !important;
}
table {
	text-align: center;
	border-collapse: collapse;
	padding: 1px;
}

.indexW{
width: 50px;
color: red;
}


</style>    
  </head>
<body>
<div id="app" class="container-fluid" >
	<div class="row">
		<div class="col-sm-12" >
		    <br/>
			<b-input-group key="sm" size="sm" class="mb-3" prepend="名称" >
			    <b-form-input v-model="ps.name"></b-form-input>
			    <b-input-group-append>
			      <b-button size="sm" text="Button" variant="outline-primary" @click="listPage" >查询</b-button>
			    </b-input-group-append>
			</b-input-group>
		</div>
	</div><!-- row1 -->

<div class="row">
	<div class="col-sm-12">
		<b-table id="my-table" 
		      :items="list"  :fields="fields"  
		       head-variant="light"   
		       selectable  select-mode="single"  @row-selected="onRowSelected"  selected-variant="info"
		       small hover  caption-top    responsive="true"  > <!-- stacked="sm" -->
		      <template v-slot:table-caption>
			       <div class="mt-3" style="text-align: right;">
					    <b-button-group  size="sm">
					      <b-button variant="outline-success" @click="add"   >添加</b-button>
					      <b-button variant="outline-info"    @click="edit"  >编辑</b-button>
					      <b-button variant="outline-warning" @click="remove">删除</b-button>
					    </b-button-group>
					    <b-dropdown  right text="menu" size="sm" variant="outline-success">
					      <b-dropdown-item>Item 1</b-dropdown-item>
					      <b-dropdown-item>Item 2</b-dropdown-item>
					      <b-dropdown-item>Item 3</b-dropdown-item>
					    </b-dropdown>
			       </div>
		      </template>
		      <template v-slot:cell(index)="data"><!-- 行号 -->
                   {{((ps.pageNum-1)*ps.pageSize)+ data.index + 1 }}
              </template>
		      
		      
		</b-table>
		<b-pagination
		       v-model="ps.pageNum"
		       :total-rows="ps.total"
		       :per-page="ps.pageSize"
		       aria-controls="my-table"
		       align="right"
		       @input="listPage"
		       size="sm" >
		</b-pagination>
	</div>
</div><!-- row2 -->

<!-- 添加和删除的对话框 -->
<b-modal id="bv-modal-example"  header-bg-variant="info" @show="resetModal" @hidden="resetModal" @ok="handleOk"  >
    <template v-slot:modal-title>
      {{vo.isNew?'添加':'编辑'}}记录
    </template>
    <div class="d-block text-center">
      <div>
		  <b-form-group label-cols="2" label-cols-lg="2" label-size="sm" label="主键" label-for="input-sm">
		    <b-form-input id="input-sm" size="sm" v-model="vo.id"></b-form-input>
		  </b-form-group>
		  <b-form-group label-cols="2" label-cols-lg="2" label-size="sm" label="名称" label-for="input-sm">
		    <b-form-input id="input-sm" size="sm" v-model="vo.name"></b-form-input>
		  </b-form-group>
      </div>
    </div>
    <template v-slot:modal-footer="{ ok, cancel }">
      <b-button size="sm" variant="outline-success" @click="ok()">保存</b-button>
      <b-button size="sm" variant="outline-danger"  @click="cancel()">取消</b-button>
    </template>
</b-modal>


<p>
      选中的行:{{ selected }}
  <br/>
  <br/>
 
</p>

</div><!-- app -->
<!-- end 添加模板  -->
<script src ="../resources/js/vue.min.js"></script>
<script src ="../resources/js/bootstrap-vue.min.js"></script>
<script src ="../resources/js/axios.min.js"></script>
<script src ="../resources/js/vue-axios.min.js"></script>
<script src ="../resources/js/app.js"></script>

<script type="text/javascript">
new Vue({
	el : '#app'
    ,data:function(){
		     return	{
		        ps:{//查询和分页的参数
		        	name:'', //查询项name
		        	pageSize: 10,
			        total :0,   //总条数
			        pageNum: 1 //当前页数
		        },
		        list: [], //数据
		        fields: [ //字段描述
		        	{
			              key: 'index',
			              label: '行号'
			              ,sortable: false
			              ,class: 'indexW'
			        },
		            {
		              key: 'id',
		              label: '主键'
		              ,sortable: false
		            },
		            {
		              key: 'name',
		              label: '名称'
		              ,sortable: false
		            },
		            {
		              key: 'Address',
		              label: '地址'
		              ,sortable: false
		            }
		          ]
		        ,selected: [] //选中的数据
		        ,vo:{} //添加或编辑的对象
		    }
    }//data
    ,computed: {
        
    }
    ,mounted: function() {
    	this.listPage();//加载时加载列表
	}
    ,methods:{
      listPage:function(){
    		 var url="/demo/listPage"
    		 var ps=this.ps;
    		 var that=this;
    		 this.$http.post(url,ps).then((data)=> {
       	         ({list:that.list,total:that.ps.total}=data);//外层(括号)是必须的
	       	 });
      }	 
      ,onRowSelected(items) {
        this.selected = items;//选中行
      },
      add:function(){
    	  this.vo={isNew:true}; //插入数据并标识 isNew=true
    	  this.$bvModal.show('bv-modal-example');
      },
      edit:function(){
    	  if(this.selected.length==1){
    	      this.vo=this.selected[0]; //把选中的第一行数据设置为当前编辑对象
              this.$bvModal.show('bv-modal-example');
    	  }else{
    		  this._toast('请选择1行数据！');
    	  }
      },
      remove:function(){
    	  this._confirm('确认删除吗?',ok=>{
    		  if(ok){
	  	    	    var url="/demo/deleteByIds"
	  		    	var ps=[];
	  	    	    this.selected.forEach((item)=>{ ps.push(item.id); })
	  		    	this.doSave(url,ps);
      		  }
    	  });
      },
      resetModal() {
        //重置对话框
      },
      handleOk:function(bvModalEvt) {
    	 var url="/demo/"
         if(this.vo.isNew){//插入
        	 url+="add";
         }else{//编辑
        	 url+="update";
         }
    	 var ps=this.vo;
    	 this.doSave(url,ps);
      },
      
      //保存
      doSave:function (url,ps){
    	  this.$http.post(url,ps).then((data)=> {
	       	    this._toast('操作成功','success');
	       	    this.listPage();//刷新列表
 	      });
      }
    }
});
</script>
</body>
</html>
